<template>
  <div>
    <gen-descriptions :render-data="renderData" :el-table-props="elTableProps">
      <template #idCard>
        <div>123</div>
      </template>
    </gen-descriptions>
  </div>
</template>

<script>
import { Button } from 'element-ui'

export default {
  name: 'GEDescriptions',
  data() {
    return {
      elTableProps: {
        size: 'small',
        column: 2,
        labelStyle: { width: '120px' },
        contentStyle: { width: '250px' }
      },
      renderData: {
        model: [
          { label: '小垃圾', prop: 'xiaolaji' },
          { label: '中垃圾', prop: 'zhonglaji' },
          { label: '大垃圾', prop: 'dalaji' },
          { label: '小智障', prop: 'xiaozhizhang' },
          {
            label: '中智障',
            format: (h, data) => {
              return h(
                Button,
                {
                  props: { size: 'small', type: 'text' },
                  on: {
                    click: () => this.foo(data)
                  }
                },
                '查看'
              )
            }
          }, // 使用h函数
          { label: '大智障', template: 'idCard' } //使用插槽
        ],
        data: {
          xiaolaji: 123
        }
      }
    }
  },

  methods: {
    foo() {
      alert('小智障')
    }
  }
}
</script>

<style lang="scss" scoped></style>
